<script lang='ts' setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
// proxy 替代 this
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();

const data = reactive({})
const drawer = ref(false)
const innerDrawer = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('You still have unsaved data, proceed?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
onBeforeMount(() => {

})
onMounted(() => {

})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
    ...toRefs(data),
    drawer
})
</script>

<template>
    <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
        <div>
            <el-button @click="innerDrawer = true">Click me!</el-button>
            <el-drawer v-model="innerDrawer" title="I'm inner Drawer" :append-to-body="true"
                :before-close="handleClose">
                <p>_(:зゝ∠)_</p>
            </el-drawer>
        </div>
    </el-drawer>
</template>

<style scoped lang='scss'></style>